import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { PageContiner, Continer } from '@/components';
import { MODULE_NAME, getList } from './redux';
import ProTable from '@ant-design/pro-table';
import { Button, message } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-table';
import type { ITableListProp } from './index.d';

const columns: ProColumns<ITableListProp>[] = [{
  title: '学校',
  key: 'schoolName',
  dataIndex: 'schoolName',
  width: 150,
  align: 'center',
  search: false
}, {
  title: '馆存书籍',
  key: 'totalBooks',
  align: 'center',
  dataIndex: 'totalBooks',
  width: 150,
  valueType: 'text'
}];

const BookInventory: React.FC = () => {
  const dispatch = useDispatch();
  const [loading, setLoading] = useState<boolean>(false);

  const dataSource = useSelector(state => state[MODULE_NAME].tableData);

  // 获取列表数据的方法
  const getTableData = async () => {
    setLoading(true)
    await dispatch(getList())
    setLoading(false)
  }

  useEffect(() => {
    getTableData()
  }, [])

  // 导出表格数据
  const downloadSourceData = () => {
    message.warning('该功能正在开发中！')
  }

  return (
    <PageContiner hiddenBreadcrumb={false}>
      <ProTable<ITableListProp>
        rowKey="schoolId"
        loading={loading}
        columns={columns}
        search={false}
        bordered
        dataSource={dataSource}
        scroll={{
          x: 300,
          y: 'calc(100vh)',
          scrollToFirstRowOnChange: true
        }}
        options={false}
        tableRender={(_, dom) => (
          <Continer>
            {dom}
          </Continer>
        )}
        toolBarRender={() => [
          <Button key="out" onClick={downloadSourceData}>
            导出数据
            <DownloadOutlined />
          </Button>
        ]}
      />
    </PageContiner>
  )
}

export default BookInventory
